In this lesson, we'll take a quick look at creating flameless browser window instances, Electron provides
a dedicated page to this concept, which I've linked to in the lesson resources.
Now, by default, and certainly for the majority of use cases, an app window will contain the native
user interface elements of the operating system.
On Mac, for example, the top bar and window control buttons close, minimize and maximize similar
to Windows and Linux.
But in some cases the content being presented in an app window might be better suited to not having
these elements.
A perfect example being something like the quick time video player interface, keeping in mind that
this will require alternative ways of interacting with the window.
Let's see the most basic example in the main window constructor set frame to false.
I'll get rid of the dev tools again.
Save.
And they're the exact same up window as before, but this time round, without any native window elements,
as I mentioned, though, with this being a malcontent, we no longer have any way to interact with
this window.
For example, we can't drag it around freely.
This wasn't as apparent before as the top allowed us to grab and move the entire window.
But instead, what happens when I click and drag is I'm selecting the HTML content.
Not a great look for a native app.
So to fix this, we can essentially specify exactly where we want to allow dragging and selecting within
our app back to our code.
And very conveniently, we can achieve this with some success selectors.
This might seem a bit odd at first, but keep in mind that what we are interacting with inside of a
browser window is nothing other than the Web content of that window html.
And its main purpose is that of styling such as HTML.
Styling, of course, includes behavioral styling such as selection, etc. in indexed or HTML.
Then I'll give the body element a style tag.
A style tag in the head would have worked.
Also setting the web kit user select property, this web kit prefix being how you'll see it written
in the docs, but it's not actually required.
This tag has been standardized and can simply be written as user select.
Either will work though none, meaning nothing in the body element is selectable.
Save and manually reload the browser window content with command or try selecting again nothing.
But we still cannot drag this flameless window, which is what we originally set out to do.
So back to indexed HTML and now to also make this entire body element a Dragonball region, said Webcke
it up region to drag this being a non-standard tag.
So the web kit prefix is required to save this and may not to trigger reload.
And now keeping in mind that our body element does not have 100 per cent height, it's around the content
here.
So click drag and the app moves as expected.
Of course, it's not always going to be as simple as making everything in the body tag not selectable.
And Dragonball, some of the user interface elements will still have to behave normally to demonstrate.
I'll add a couple of breaks.
With a new input element of type range, this being an HTML5 range selector name can also be range with
a minimum value of zero and max of, say, 10, save that, reload the window content.
And now when I try and adjust the slider, the window drags instead.
That's because this element inherited the behavior from its parent, the body tag.
So depending on your app's content, you'll have to specify where the user can and cannot interact,
drag, select, etc. or fix this range slider.
Give it a style tag.
With the same property causing the trouble from here.
But instead setting it to no drag.
And this time it works while still being able to drag the frame, that window on the body element,
overall, a much better experience with a more native user interface.
That's the basics of creating a frame this window.
But again, be sure to take note of the platform notices in the docs as there's different options and
styles for such windows, depending on the user's operating system.
I'll show one last example of this.
Let's say instead of hiding all the user interface elements, we simply want to hide the title bar.
We can set total boss style to hidden.
I'll add a bit of padding to the top of the body tag as the content will now push up behind the window
buttons.
Save both files and their same flameless window, but we have those native window buttons floating over
the content.